.subtitle{
  font-size: 14px;
  display: flex;
  gap: 6px;
  align-items: baseline;   /* baseline, not center */
}

/* Container tracks width and baseline-aligns with text */
.flip-container{
  position: relative;
  display: inline-block;
  vertical-align: baseline;   /* align with surrounding text baseline */

  /* width responds to active word */
  width: var(--pill-width, auto);
  transition: width .35s ease;

  /* don't clip pill */
  overflow: visible;
}

/* pill */
.flip-word{
  position: absolute;
  left: 50%;
  top: 0;                        /* anchor to top, not 50% */
  transform: translate(-50%, 0) translateY(100%);

  padding: 2px 10px;
  border-radius: 999px;
  background: #000;
  color: #fff;

  font: inherit;                 /* same font as surrounding text */
  white-space: nowrap;
  line-height: 1.1;

  opacity: 0;
  transition:
    transform .45s ease,
    opacity .45s ease;
}

/* Active state */
.flip-word.active{
  opacity: 1;
  transform: translate(-50%, 0) translateY(-75%);
}

/* Exit animation */
.flip-word.exit{
  opacity: 0;
  transform: translate(-50%, 0) translateY(-100%);
}